<html lang="en">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>OptaPlanner Spring Boot example</title>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/webjars/font-awesome/css/all.css"/>
    <link rel="stylesheet" href="/app.css"/>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://kogito.kie.org/">
            <img src="kogitoLogo100px.png" alt="Kogito logo">
        </a>
        <a class="navbar-brand" href="https://www.optaplanner.org">
            <img src="optaPlannerLogo200px.png" alt="OptaPlanner logo">
        </a>
    </nav>
    <div class="sticky-top d-flex justify-content-center align-items-center" aria-live="polite" aria-atomic="true">
        <div id="notificationPanel" style="position: absolute; top: .5rem;"></div>
    </div>
    <!--    <div id="notificationPanel" aria-live="polite" aria-atomic="true" class=""></div>-->
    <h1>Flight process</h1>
    <p>Flight with the optimal seating assignment.</p>
    <button class="btn btn-primary" role="button" data-action="add" data-toggle="modal" data-target="#new-flight-modal">
        Add Flight
    </button>
    <div id="flights-container"></div>
</div>

<div class="modal fade" id="new-flight-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="new-flight-modal-title">Schedule a new flight</h4>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div>
                            <div class="form-group">
                                <h3>Flight Info</h3>
                            </div>

                            <div class="form-group">
                                <label for="origin">Origin</label> <input type="text"
                                                                          class="form-control" id="origin" name="origin"
                                                                          required/>
                            </div>
                            <div class="form-group">
                                <label for="destination">Destination</label> <input type="text"
                                                                                    class="form-control"
                                                                                    id="destination" name="destination"
                                                                                    required/>
                            </div>
                            <div class="form-group">
                                <label for="departureDateTime">Departure Date Time</label>
                                <div style="display: flex;">
                                    <input type="date"
                                           style="width: auto;"
                                           class="form-control"
                                           id="departureDate"
                                           name="departureDate"
                                           required/>

                                    <input type="time"
                                           style="width: auto;"
                                           class="form-control"
                                           id="departureTime"
                                           name="departureTime"
                                           required/>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="form-group">
                                <h3>Seating Info</h3>
                            </div>

                            <div class="form-group">
                                <label for="seatRowSize">Number of Rows</label> <input type="number"
                                                                                       class="form-control"
                                                                                       id="seatRowSize"
                                                                                       name="seatRowSize" required/>
                            </div>
                            <div class="form-group">
                                <label for="seatColumnSize">Number of Columns</label> <input type="number"
                                                                                             class="form-control"
                                                                                             id="seatColumnSize"
                                                                                             name="seatColumnSize"
                                                                                             required/>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger"
                                    data-dismiss="modal">Cancel
                            </button>
                            <button type="button" id="new-flight-action" class="btn btn-primary">Create Flight</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add-passenger-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="add-passenger-modal-title">Add a Passenger to Flight</h4>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="container col-md-12">
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label for="name">Name</label> <input type="text"
                                                                      class="form-control" id="name" name="name"
                                                                      required/>
                            </div>
                            <div class="form-group">
                                <label for="seatTypePreference">Seat Type Preference</label>
                                <select class="form-control" id="seatTypePreference" name="seatTypePreference" required>
                                    <option value="WINDOW">Window</option>
                                    <option value="AISLE">Aisle</option>
                                    <option value="NONE">None</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="emergencyExitRowCapable">Able to help in emergencies?</label> <input
                                    type="checkbox"
                                    class="form-control" id="emergencyExitRowCapable" name="emergencyExitRowCapable"
                                    required/>
                            </div>
                            <div class="form-group">
                                <label for="paidForSeat">Paying to reserve a seat?</label> <input type="checkbox"
                                                                                                  class="form-control"
                                                                                                  id="paidForSeat"
                                                                                                  name="paidForSeat"
                                                                                                  required,
                                                                                                  data-target="#seatPicker"
                                                                                                  aria-expanded="false"
                                                                                                  aria-controls="#seatPicker"/>
                                <div id="seatPicker"/>
                            </div>
                            <div class="modal-footer" style="width: max-content;">
                                <button type="button" class="btn btn-danger"
                                        data-dismiss="modal">Cancel
                                </button>
                                <button type="button" id="add-passenger-action" class="btn btn-primary">Add Passenger
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<script src="/webjars/momentjs/min/moment.min.js"></script>
<script src="/app.js"></script>
</body>
</html>
